<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员客户信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 查询客户列表 -->
    <div class="query">
      <div class="header">
        <span>数据查询</span>
        <p @click="show3 = true" v-show="!show3">收起</p>
        <p @click="show3 = false" v-show="show3">展开</p>
      </div>
      <el-collapse-transition>
        <div class="polling" v-show="!show3">
          <el-form :inline="true" ref="form" :model="queryForm" size="mini">
            <el-form-item label="信息">
              <el-input
                placeholder="请输入客户姓名/手机号码"
                v-model="queryForm.info"
              ></el-input>
            </el-form-item>
            <div class="selectDate">
              <span>时间</span>
              <div class="picker">
                <el-date-picker
                  v-model="queryForm.date"
                  unlink-panels
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy- MM- dd"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </div>
            <el-form-item label="应用名称">
              <el-select
                v-model="queryForm.yyname"
                placeholder="请选择应用名称"
                clearable
                filterable
                :default-first-option="true"
              >
                <el-option
                  v-for="items in rank.list"
                  :key="items.id"
                  :label="items.applicationName"
                  :value="items.applicationName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客服">
              <el-input
                placeholder="请输入客服"
                v-model="queryForm.service"
              ></el-input>
            </el-form-item>
            <el-form-item label="会员等级">
              <el-input
                placeholder="请输入会员等级"
                v-model="queryForm.grade"
              ></el-input>
            </el-form-item>

            <el-form-item label="地区">
              <levelAddr
                class="addressContent"
                :province="queryForm.province"
                :city="queryForm.city"
                :area="queryForm.area"
                @updateprovice="getProvince"
                @updatecity="getCity"
                @updatearea="getArea"
              ></levelAddr>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchEvent()">搜索</el-button>
              <el-button plain @click="reset">重置</el-button>
              <!-- <el-button type="primary">导出数据</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>
    </div>
    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="table">
      <el-button
        type="primary"
        style="margin-bottom: 10px"
        @click="
          addIf = true;
          param = 3;
        "
        >添加客户</el-button
      >
      <!-- v-if="parArray.indexOf('addCustomerCode') != -1" -->
      <vxe-table align="center" :data="tableData.list" style="width: 100%">
        <vxe-table-column type="seq" title="序号" width="50"></vxe-table-column>
        <vxe-table-column title="姓名" min-width="100">
          <template slot-scope="scope">
            <p class="nameClick">
              {{ scope.row.customerName }}
            </p>
          </template>
        </vxe-table-column>
        <vxe-table-column field="phone" title="手机号码" min-width="120">
          <template slot-scope="scope">
            <p>{{ scope.row.customerPhone }}</p>
          </template>
        </vxe-table-column>
        <vxe-table-column title="地址" show-overflow min-width="180">
          <template slot-scope="scope">
            <p>
              {{ scope.row.provinceName }},{{ scope.row.cityName }},{{
                scope.row.regionName
              }},{{ scope.row.detailedAddress }}
            </p>
          </template>
        </vxe-table-column>
        <vxe-table-column title="应用名称" min-width="100">
          <template slot-scope="scope">
            <p>{{ scope.row.applicationName }}</p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="客服人员/等级" min-width="110">
          <template slot-scope="scope">
            <p>{{ scope.row.customerServiceName }}</p>
            <p>{{ scope.row.customerType }}</p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="时间" min-width="100">
          <template slot-scope="scope">
            <p>{{ $moment(scope.row.createdTime) }}</p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="操作" min-width="150" fixed="right">
          <template slot-scope="scope">
            <p
              class="operation"
              v-if="parArray.indexOf('memDetail') != -1"
              @click="detailFix(0, scope.row)"
            >
              <span>详情</span>
            </p>
            <p
              class="operation"
              v-if="parArray.indexOf('memFix') != -1"
              @click="detailFix(1, scope.row)"
            >
              <span>修改</span>
            </p>
            <p
              class="operation"
              v-if="parArray.indexOf('memdelect') != -1"
              @click="delectEvent(scope.row)"
            >
              <span>删除</span>
            </p>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <!-- 分配用户列表 -->
     <p style="height: 10px"></p>
      <!-- 分页start -->
      <div class="page" v-if="tableData.totalNum > 0">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.totalNum"
            prev-text="上一页"
            next-text="下一页"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 分页end -->
    <!-- 添加客户弹框 -->
    <el-dialog
      :visible.sync="addIf"
      :append-to-body="true"
      :title="param == 3 ? '添加客户' : param == 1?'修改详情':'查看详情'"
    >
      <div class="contentForm">
        <el-form
          ref="addForm"
          :rules="formRules"
          :model="addForm"
          label-width="80px"
          :disabled="param == 0 ? true : false"
        >
          <div class="inline">
            <el-form-item label="客户姓名" prop="name">
              <el-input
                size="mini"
                v-model="addForm.name"
                placeholder="请输入客户姓名"
                maxlength="32"
              ></el-input>
            </el-form-item>

            <el-form-item label="客户性别" prop="sex">
              <el-select
                size="mini"
                v-model="addForm.sex"
                placeholder="选择性别"
                default-first-option
              >
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="inline">
            <el-form-item label="客户年龄" prop="ago">
              <el-input
                size="mini"
                v-model="addForm.ago"
                placeholder="请输入客户年龄"
                type="number"
                maxlength="32"
              ></el-input>
            </el-form-item>

            <el-form-item label="联系电话" prop="call">
              <el-input
                size="mini"
                v-model="addForm.call"
                placeholder="请输入联系电话"
                maxlength="11"
              ></el-input>
            </el-form-item>
          </div>

          <div class="inline">
            <el-form-item label="消费金额" prop="salasmoney">
              <el-input
                size="mini"
                v-model="addForm.salasmoney"
                placeholder="请输入消费金额"
                type="number"
                maxlength="32"
              ></el-input>
            </el-form-item>
            <el-form-item label="客户积分" prop="integral">
              <el-input
                size="mini"
                v-model="addForm.integral"
                placeholder="请输入客户积分"
                type="number"
                maxlength="32"
              ></el-input>
            </el-form-item>
          </div>

          <div class="inline">
            <el-form-item label="客户经验" prop="experience">
              <el-input
                size="mini"
                v-model="addForm.experience"
                placeholder="请输入客户经验"
                type="number"
                maxlength="32"
              ></el-input>
            </el-form-item>

            <el-form-item label="客服姓名" prop="service">
              <el-input
                size="mini"
                v-model="addForm.service"
                placeholder="请输入客服姓名"
                maxlength="32"
              ></el-input>
            </el-form-item>
          </div>

          <div class="inline">
            <el-form-item label="会员等级" prop="grade">
              <el-input
                size="mini"
                v-model="addForm.grade"
                placeholder="请输入会员等级"
                maxlength="32"
              ></el-input>
            </el-form-item>
            <el-form-item label="客户类型" prop="classtype">
              <el-input
                maxlength="32"
                size="mini"
                v-model="addForm.classtype"
                placeholder="请输入客户类型"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item label="应用名称" prop="yyname">
            <el-select
              size="mini"
              v-model="addForm.yyname"
              placeholder="选择应用名称"
              default-first-option
              @change="changeYY"
            >
              <el-option
                v-for="items in rank.list"
                :key="items.id"
                :label="items.applicationName"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- v-if="param == 3" -->
          <div v-if="propertList">
            <div
              class="inline"
              v-for="items in propertList"
              :key="items.propertyName"
            >
              <el-form-item :label="items.propertyName">
                <el-input
                  maxlength="32"
                  size="mini"
                  v-model="items.propertyValue"
                  placeholder="请输入信息"
                ></el-input>
              </el-form-item>
            </div>
          </div>

          <!-- // 详情回显  与 修改// -->
          <div v-if="param != 3 && addForm.memberPropertyList">
            <div
              class="inline"
              v-for="items in addForm.memberPropertyList"
              :key="items.propertyName"
            >
              <el-form-item :label="items.propertyLabel">
                <el-input
                  maxlength="32"
                  size="mini"
                  v-model="items.propertyValue"
                  placeholder="请输入信息"
                ></el-input>
              </el-form-item>
            </div>
          </div>

          <el-form-item label="地区" required>
            <levelAddr
              class="addressContent"
              :province="addForm.province"
              :city="addForm.city"
              :area="addForm.area"
              @updateprovice="getProvince1"
              @updatecity="getCity1"
              @updatearea="getArea1"
              :disabled="param == 0 ? true : false"
            ></levelAddr>
          </el-form-item>

          <el-form-item label="详细地址" prop="detail">
            <el-input
              size="mini"
              v-model="addForm.detail"
              placeholder="请输入详细地址"
              maxlength="52"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              v-if="param == 3"
              type="primary"
              size="mini"
              @click="submitForm('addForm')"
              >确定</el-button
            >
            <el-button
              v-if="param == 1"
              type="primary"
              size="mini"
              @click="submitFormFix('addForm')"
              >确定修改</el-button
            >
            <el-button
              v-if="param == 3"
              size="mini"
              @click="
                resetForm('addForm');
                addIf = false;
              "
              >取 消</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 添加客户弹框 -->
  </div>
</template>

<script>
import levelAddr from "@/components/levelAddr";
export default {
  components: {
    levelAddr,
  },
  data() {
    return {
      show3: false,
      queryForm: {
        info: "",
        yyname: "",
        service: "",
        grade: "",
        date: "",
        province: "",
        city: "",
        area: "",
      },
      tableData: [],
      line: [],
      rank: [], //应用列表
      customer: [],
      currentPage1: 1,
      pageSize: 10,
      limits: "",
      parArray: [],
      addIf: false,
      addForm: {
        id: "",
        name: "",
        sex: "",
        ago: "",
        call: "",
        salasmoney: "",
        integral: "",
        experience: 0,
        service: "",
        grade: "",
        classtype: "",
        yyname: '',
        province: "",
        city: "",
        area: "",
        detail: "",
        memberPropertyList: [],
      },
      formRules: {
        name: [{ required: true, message: "请输入客户姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请输入客户性别", trigger: "change" }],
        ago: [{ required: true, message: "请输入客户年龄", trigger: "blur" }],
        call: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "长度在11个数字",
            trigger: "blur",
          },
        ],
        integral: [
          { required: true, message: "客户积分不能为空", trigger: "blur" },
        ],
        salasmoney: [
          { required: true, message: "消费金额不能为空", trigger: "blur" },
        ],
        experience: [
          { required: true, message: "客户经验不能为空", trigger: "blur" },
        ],
        service: [
          { required: true, message: "客服姓名不能为空", trigger: "blur" },
        ],
        grade: [
          { required: true, message: "会员等级不能为空", trigger: "blur" },
        ],
        classtype: [
          { required: true, message: "客服类型不能为空", trigger: "blur" },
        ],
        yyname: [{ required: true, message: "应用名称", trigger: "change" }],
        detail: [{ required: true, message: "详细地址", trigger: "blur" }],
      },
      param: 0, //判断是修改还是详情
      propertList: [], //自定义值
      parArray: [],
    };
  },
  created() {
    this.listAxios();
    this.rankAxios();
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "memberInfoCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  activated() {
    this.rankAxios();
  },
  beforeRouteLeave(to, form, next) {
    document.onkeydown = null;
    next();
  },
  methods: {
    // 应用选择
    changeYY(e) {
      this.axios
        .get(
          "/member/v1/member/property/config/applicationid/list?applicationId=" +
            e,
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.addForm.memberPropertyList = [];
            for (let i in res.data) {
              res.data[i].propertyValue = "";
            }
            this.propertList = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    submitForm(addForm) {
      this.$refs[addForm].validate((valid) => {
        if (valid) {
          let memberPropertyList = [];
          for (let i in this.propertList) {
            memberPropertyList.push({
              propertyLabel: this.propertList[i].propertyName,
              propertyKey: this.propertList[i].propertyCode,
              propertyValue: this.propertList[i].propertyValue,
            });
          }
          this.axios
            .post("/member/v1/member/add", {
              request: {
                applicationId: this.addForm.yyname,
                cityName: this.addForm.city,
                consumerAmount: this.addForm.salasmoney,
                customerAge: this.addForm.ago,
                customerExperience: this.addForm.experience,
                customerIntegral: this.addForm.integral,
                customerName: this.addForm.name,
                customerPhone: this.addForm.call,
                customerServiceName: this.addForm.service,
                customerSex: this.addForm.sex,
                customerType: this.addForm.classtype,
                detailedAddress: this.addForm.detail,
                memberLevel: this.addForm.grade,
                memberPropertyList: memberPropertyList,
                provinceName: this.addForm.province,
                regionName: this.addForm.area,
              },
              version: "",
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("添加成功");
                this.addIf = false;
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          console.log("提交失败");
          return false;
        }
      });
    },

    // 修改
    submitFormFix(addForm) {
      this.$refs[addForm].validate((valid) => {
        if (valid) {
          // 改变应用名称 自定义值重新处理
          let memberPropertyList = [];
          if (this.addForm.memberPropertyList.length > 0) {
            memberPropertyList = this.addForm.memberPropertyList;
          } else {
            // console.log(123123)
            for (let i in this.propertList) {
              memberPropertyList.push({
                propertyLabel: this.propertList[i].propertyName,
                propertyKey: this.propertList[i].propertyCode,
                propertyValue: this.propertList[i].propertyValue,
              });
            }
          }
          // console.log(memberPropertyList);
          // 改变应用名称 自定义值重新处理
          this.axios
            .post("/member/v1/member/update", {
              appId: "",
              appKey: "",
              request: {
                applicationId: this.addForm.yyname,
                cityName: this.addForm.city,
                consumerAmount: this.addForm.salasmoney,
                customerAge: this.addForm.ago,
                customerExperience: this.addForm.experience,
                customerIntegral: this.addForm.integral,
                customerName: this.addForm.name,
                customerPhone: this.addForm.call,
                customerServiceName: this.addForm.service,
                customerSex: this.addForm.sex,
                customerType: this.addForm.classtype,
                detailedAddress: this.addForm.detail,
                memberLevel: this.addForm.grade,
                memberPropertyList: memberPropertyList,
                provinceName: this.addForm.province,
                regionName: this.addForm.area,
                id: this.addForm.id,
              },
              version: "",
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("添加成功");
                this.addIf = false;
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          console.log("提交失败");
          return false;
        }
      });
    },
    resetForm(addForm) {
      this.$refs[addForm].resetFields();
    },

    listAxios() {
      let beginTime = "";
      let endTime = "";
      if (this.queryForm.date) {
        beginTime = this.queryForm.date[0] + " 00:00:00";
        endTime = this.queryForm.date[1] + " 23:59:59";
      }
      this.axios
        .post("/member/v1/member/list", {
          request: {
            applicationName: this.queryForm.yyname,
            cityName: this.queryForm.city,
            customerServiceName: this.queryForm.service,
            endTime: endTime,
            keyWord: this.queryForm.info,
            memberLevel: this.queryForm.grade,
            pageNo: this.currentPage1,
            pageSize: this.pageSize,
            provinceName: this.queryForm.province,
            regionName: this.queryForm.area,
            startTime: beginTime,
          },
          version: "",
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
          }
        });
    },
    // 应用列表
    rankAxios() {
      this.axios
        .post(
          "/member/v1/member/application/list",
          {
            appId: "",
            appKey: "",
            request: {
              applicationName: "",
              pageNo: 1,
              pageSize: 10000,
            },
            version: "",
          },
          {
            headers: {
              isloading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.rank = res.data;
          }
        });
    },
    // 修改详情查询
    detailFix(param, row) {
      this.param = param; //判断是修改还是详情
      this.propertList = []; //重置选择的值
      this.axios.get("/member/v1/member/detail?id=" + row.id).then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.addIf = true;
          this.addForm = {
            name: res.data.customerName,
            sex: res.data.customerSex,
            ago: res.data.customerAge,
            call: res.data.customerPhone,
            salasmoney: res.data.consumerAmount,
            integral: res.data.customerIntegral,
            experience: res.data.customerExperience,
            service: res.data.customerServiceName,
            grade: res.data.memberLevel,
            classtype: res.data.customerType,
            yyname: res.data.applicationId,
            province: res.data.provinceName,
            city: res.data.cityName,
            area: res.data.regionName,
            detail: res.data.detailedAddress,
            id: row.id,
            memberPropertyList: res.data.memberPropertyList,
          };
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 删除
    delectEvent: _.debounce(function (row) {
      this.$confirm("确定要删除该会员客户吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get("/member/v1/member/delete?id=" + row.id)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("删除成功");
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }, 300),
    reset: _.debounce(function () {
      this.queryForm = {};
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios();
    }, 300),

    getProvince(val) {
      this.queryForm.province = val;
      if (!val) {
        this.queryForm.city = "";
        this.queryForm.area = "";
      }
    },
    getCity(val) {
      this.addForm.city = val;
    },
    getArea(val) {
      this.addForm.area = val;
    },

    getProvince1(val) {
      this.addForm.province = val;
      if (!val) {
        this.addForm.city = "";
        this.addForm.area = "";
      }
    },
    getCity1(val) {
      this.addForm.city = val;
    },
    getArea1(val) {
      this.addForm.area = val;
    },

    // 分页
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.listAxios();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.listAxios();
    },
    //** 模糊查询数据 **//
    searchEvent() {
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios();
    },
    is_null(content) {
      if (
        content + "" != "" &&
        content + "" != "undefined" &&
        content + "" != "null" &&
        content + "" != "请选择"
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.inline {
  display: flex;
  justify-content: space-between;
  /deep/.el-form-item {
    // margin-bottom: 12px;
    width: 48%;
  }
}
.dialog-footer {
  text-align: right;
}
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.table {
  margin-top: 10px;
  margin-bottom: 40px;
}

/deep/.vxe-cell--title {
  color: #333;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
  /deep/ .query .el-input__inner {
    width: 180px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  span {
    font-size: 15px;
    // color: #2d7edf;
    padding-bottom: 10px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  display: inline-block;
  padding: 0 5px;
  color: #2d7edf;
}
.operation:hover {
  cursor: pointer;
}
.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.contentForm {
  width: 90%;
  margin: 0 auto;

  /deep/.el-select > .el-input {
    display: block;
    // width: 176px;
  }
  /deep/.el-form-item {
    margin-bottom: 12px;
  }
}
</style>
